<template>
	<!-- 14.CVTC报价模板-简易版(200725各项取值详细说明) -->
	<div class="box box14 pr">
		<header class="head14 head clearfix">
			<div class="fl">
				<h6>上海中远威治罐箱物流有限公司</h6>
				<!-- <h6>上海市杨浦区昆明路739号文通大厦702室</h6> -->
				<h6>{{ state.salse.ADDRESS }}</h6>
				<h6>电话：(86+21) {{state.salse.TELEPHONE}}</h6>
				<h6>传真：(86+21) {{state.salse.FAX}}</h6>
				<h6><a href="www.coscovtg.com" title="">www.coscovtg.com</a></h6>
			</div>
			<div class="fr">
				<img src="/images/logo14.png" height="60" style="margin-top:10px;">
			</div>
		</header>
		
		<table class="table1">
			<thead>
				<tr>
				  <th class="tal w10">客户</th>
				  <th class="tal w40">{{state.data.CORP}}（公司）</th>
				  <th class="tal w10">报价方</th>
				  <th class="tal w40">COSCOVTG</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th class="tal">询价人</th>
					<td>{{state.data.CORPCONTACT}}（先生/女士） </td>
					<th class="tal">报价人</th>
					<td>{{state.data.SALES}}</td>
				</tr>
				<tr>
					<th class="tal">抄送 </th>
					<td>{{state.data.CORPCOPYTO}}（先生/女士） </td>
					<th class="tal">电话</th>
					<td>021-{{state.salse.TELEPHONE}}</td>
				</tr>
				<tr>
					<th class="tal"></th>
					<td></td>
					<th class="tal">传真</th>
					<td>021-{{state.salse.FAX}}</td>
				</tr>
				<tr>
					<th class="tal"></th>
					<td></td>
					<th class="tal">邮箱</th>
					<td>{{state.salse.email}}</td>
				</tr>
				<tr>
					<th class="tal"></th>
					<td></td>
					<th class="tal">报价日期</th>
					<td>{{state.data.OPTIME}}</td>
				</tr>
			</tbody>
		</table>
		
		<h4 style="margin:20px 0;">商务报价：</h4>
		<table class="table2">
			<tbody>
				<tr>
					<td class="w35">装载产品：</td>
					<td>{{ state.data.GOODS }}</td>
				</tr>
				<tr>
					<td>是否危险品（UN号）：</td>
					<td>{{ state.data.GOODSKIND }} {{ state.data.UNNO }}</td>
				</tr>
				<tr>
					<td>密度: </td>
					<td>{{ state.data.MIDU }}</td>
				</tr>
				<tr>
					<td>安全装载量范围（吨）: </td>
					<td>{{ state.data.SAFEGWET?state.data.SAFEGWET/1000:'' }}-{{ state.data.SAFEGWETTO?state.data.SAFEGWETTO/1000:'' }}</td>
				</tr>
				<tr>
					<td>运输线路: </td>
					<td>{{ state.data.TRANSLINE }}-{{ state.data.TRANSLINETO }}</td>
				</tr>
				<tr>
					<td>单程运输时间（天）: </td>
					<td>{{ state.data.TRANSDAYS }}</td>
				</tr>
				<tr>
					<td>罐箱设备要求: </td>
					<td>{{ state.data.TANKDEMO }}</td>
				</tr>
			</tbody>
		</table>

		<table class="table3" style="margin-top:10px;">
			<thead>
				<tr>
					<th class="w35">费用项</th>
					<th class="">价格（税率）</th>
					<th class="w20">单位</th>
					<th class="w30">备注</th>
				</tr>
			</thead>
			<tbody>
				<template v-for="item in state.bjline">
					<tr v-for="(it,idx) in item.cost">
						<td>{{ item.LOADPLACE||'-' }}至{{ item.DISPLACE||'-' }}+{{ it.ITEMCODE }}</td>
						<td>{{ it.UNITPRICE }} ({{ it.TAXRATE }})</td>
						<td>{{ it.PRICETYPE }}</td>
						<td></td>
					</tr>
				</template>
				<tr>
					<td>&nbsp;</td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>总报价</td>
					<td>{{ state.totalPrice.toFixed(2) }}</td>
					<td></td>
					<td>报价编号：{{ state.data.BJNO }}</td>
				</tr>
			</tbody>
		</table>

		<ul class="tip">
			<li>装卸货免费待时：{{ state.bjCost.ZHDSF.TRANSDAYS||'-' }}小时，超过按RMB{{ state.bjCost.ZHDSF.UNITPRICE||'-' }}/小时收取待时费，过夜费按RMB{{ state.bjCost.GYF.UNITPRICE||'-' }}/tk收取</li>
			<li>起运港{{ state.bjCost.QYGZQF.TRANSDAYS||'-' }}天免用箱，卸货港{{ state.bjCost.MDGZQF.TRANSDAYS||'-' }}天免用箱，罐箱卸货后还至我司指定堆场后视为还箱，超过免用箱期按USD{{ state.bjCost.MDGZQF.UNITPRICE||'-' }}/tk/天收取滞期费</li>
			<li>目的港免堆{{ state.bjCost.QYGZQF.TRANSDAYS||'-' }}天，超过按RMB{{ state.bjCost.QYGZQF.UNITPRICE||'-' }}/tk/天收取堆存费</li>
			<!-- 及RMBXX/tk/天滞期费 -->
			<li>清洗费</li>
			<li>罐租</li>
		</ul>
		<h5 class="udH5">报价不含:</h5>
		<ul class="tip">
			<li>货物险/海事险/关税等</li>
			<li>罐箱到目的港后的所有码头费用</li>
			<li>因加热产生的额外费用，如发生</li>
			<li>超过10加仑的残液处理费</li>
			<li>罐箱改造费，如发生</li>
		</ul>
		<ul>
			<!-- <li><b class="udH5">设备 :</b> 20’集装箱罐，T11（IMO 1), 24-25立方米，底阀卸货，可蒸汽加热</li> -->
			<li><b class="udH5">设备 :</b> {{ state.data.CONTYPE }} {{ state.data.ALLTYPE }} {{ state.data.TANKCBM }} {{ state.data.TANKTYPE }}</li>
			<li><b class="udH5">有效期:</b>有效期至：{{state.data.ENDDATE}} </li>
		</ul>
		
		<footer clas="foot foot14 pf" style="bottom: 0;width: 700px;left:50%;margin-left: -350px;position: fixed;">
			<div class="clearfix">
				<p class="fl">A Joint Venture Company of COSCO SHIPPING Logistics and VTG</p>
				<img class="fr" src="/images/logo14.png" height="20" >
			</div>
			
		</footer>
	</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, watchEffect } from "vue"
import createAxios from "/@/utils/axios";
import baTable from "/@/utils/baTable";

interface Props {
    bjno:string
}

const props = withDefaults(defineProps<Props>(), {
    bjno: '',
})


onMounted(()=>{
	getBjline()
	getBjCost()
})


const state:{
	data:anyObj,
	salse:anyObj,
	bjline:any[],
	bjCost:anyObj,
	totalPrice:number
} = reactive({
	data:{},
	salse:{},
	bjline:[],
	bjCost:{
		ZHDSF:{},
		GYF:{},
		QYGZQF:{},
		MDGZQF:{},
		MDGDCF:{},
	},
	totalPrice:0
})

createAxios({
      url:'/admin/xBjhead/edit?BJNO='+props.bjno,
    }).then((res:any)=>{
      state.data = res.data.row
			getuser(state.data.SALES,'salse')
    })

const getBjline = ()=>{
	createAxios({
		url:'admin/xBjbody/index?gstype=1&type=2&bjno='+props.bjno,
	}).then((res:any)=>{
		state.bjline = res.data.list
		state.bjline.map((item:any)=>{
			if(item.cost && item.cost.length){
				item.cost.map((it:any)=>{
					state.totalPrice +=  Number(it.UNITPRICE||0) 
				})
			}
		})
	})
}

const getBjCost = ()=>{
	createAxios({
		// url:'admin/xBjline/index?gstype=1&type=1&bjno='+props.bjno,
		url:'admin/xBjcost/index?gstype=1&type=1&bjno='+props.bjno,
	}).then((res:any)=>{
		state.bjCost.ZHDSF = res.data.list.find((item:any)=>item.ITEMCODE=='ZHDSF')||{}
		state.bjCost.GYF = res.data.list.find((item:any)=>item.ITEMCODE=='GYF')||{}
		state.bjCost.QYGZQF = res.data.list.find((item:any)=>item.ITEMCODE=='QYGZQF')||{}
		state.bjCost.MDGZQF = res.data.list.find((item:any)=>item.ITEMCODE=='MDGZQF')||{}
		state.bjCost.MDGDCF = res.data.list.find((item:any)=>item.ITEMCODE=='MDGDCF')||{}
	})
}


const getuser = (name:string,type:string)=>{
	createAxios({
		// url:'/admin/auth.admin/index?page=1&initKey=nickname&select=true&quick_search=&initValue='+name,
		url:'/admin/XBjhead/getbj?name='+name,
	}).then((res:any)=>{
		state.salse = res.data||{}
	})
}


</script>

<style lang="scss" scoped>
@import '../../../../styles/print.css';
</style>